<template>
  <!-- 文章列表 -->
  <div>
    <div class="topView">
      <el-form class="searcView">
        <el-button size="small" class="addBtn" @click="addClickfunc"
          >添加</el-button
        >
      </el-form>
    </div>
    <!-- 表格内容 -->
    <div class="bgView">
      <el-table
        class="tableView"
        :data="tableData"
        border
        max-height="700px"
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="标题"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="subtitle"
          label="副标"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="type"
          label="类型"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="sort"
          label="排序"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="lastUpdateTime"
          label="最后更新时间"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="author"
          label="作者"
          align="center"
        ></el-table-column>

        <el-table-column fixed="right" label="操作" width="210" align="center">
          <template v-slot="scope">
            <el-button
              @click="editClick(scope.row, scope.$index)"
              size="mini"
              style="background: rgb(41, 59, 105); color: white"
              >编辑
            </el-button>
            <el-button
              @click="delegateClick(scope.row, scope.$index)"
              size="mini"
              style="background: rgb(190, 15, 1); color: white"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加内容弹框 -->
    <el-dialog width="50%" title="介绍编辑" :visible.sync="editdialogClick">
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>

      <el-form :label-width="formLabelWidth">
        <el-form-item label="标题:">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="副标题:">
          <el-input></el-input>
        </el-form-item>

        <el-form-item label="排序:">
          <el-input></el-input>
          <span style="margin-left: 20px">数字越小,排序越靠前</span>
        </el-form-item>

        <el-form-item label="列表展示图:">
          <!-- el-icon-plus -->
          <el-image
            :src="src"
            style="width: 100px; height: 100px"
            @click="addimgeClick"
          ></el-image>
        </el-form-item>

        <el-form-item label="类型:">
          <el-row>
            <!-- <el-radio-group v-model="radio1" @input="inputValue"> -->
            <el-radio v-model="radio1" label="1">图文</el-radio>
            <el-radio v-model="radio1" label="2">视频</el-radio>
            <!-- </el-radio-group> -->
          </el-row>

          <el-row>
            <span>本地视频</span>
            <el-button class="addBtn">点击上传</el-button>
          </el-row>
          <el-row style="margin-top: 10px">
            <span>外部链接</span>
            <el-input style="margin-left: 10px"></el-input>
          </el-row>
        </el-form-item>

        <el-form-item>
          <!-- 添加富文本编辑器 -->
          <hooEditor />
        </el-form-item>

        <el-form-item label="作者: ">
          <el-input placeholder="请输入作者名称"></el-input>
        </el-form-item>
        <el-form-item label="来源: ">
          <el-input placeholder="输入来源"></el-input>
        </el-form-item>

        <el-form-item label="" align="center">
          <el-button
            type="small"
            class="addBtn"
            style="margin-left: -20px"
            @click="saveClick"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import hooEditor from "./hooEditor.vue";

export default {
  name: "articleList",
  data() {
    return {
      tableData: [
        {
          title: "顺丰",
          subtitle: "出大事了",
          type: "图片",
          sort: "2",
          lastUpdateTime: "2023年11月28日15:46:25",
          author: "李四",
        },
      ],
      radio1: "1", //男女
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      editdialogClick: false,
      formLabelWidth: "120px",
    };
  },
  computed: {},
  components: {
    hooEditor,
  },
  methods: {
    addClickfunc() {
      console.log("添加");
      this.editdialogClick = true;
    },
    editClick(row, index) {
      console.log(row, index);
    },

    delegateClick(row, index) {
      console.log(row, index);
    },
    //添加图片
    addimgeClick() {
      console.log("添加图片");
    },
    inputValue(val) {
      console.log(val);
    },

    saveClick() {
      console.log(this.radio1);
    },
  },
};
</script>

<style scoped>
.topView {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 30px;
  padding: 20px;
}
.bgView {
  margin-top: 20px;
}

.el-input {
  width: 40%;
}
.addBtn {
  margin-left: 10px;
  background: rgb(68, 98, 170);
  color: white;
}
</style>
